<template>
	<view class="pages">
		<topNavBarVue :isScrolled="isScrolled" title="房源详情"></topNavBarVue>
		<swiperVue :swiperList='swiperList'></swiperVue>
		<infoCardVue :detailsData='detailsData' :roomTagsList='roomTagsList' ></infoCardVue>
		<HouseConfigVue :list="list3" @jump="handleClick"></HouseConfigVue>
		<mapVue :mapData="mapData" :name="detailsData.name"></mapVue>
		<houseCardVue :list="caseList" @jump="handleClick"></houseCardVue>

		<view class="datum_box">
			<view class="card_tetle">
				<text class="tip_title">安全与物业资料</text>
			</view>
			<view class="title_down">
				物业资料
			</view>
			<view class="safety_list" v-for="(item,index) in  list5" :key="index">
				<image :src="item.icon" mode="" class="safety_icon"></image>
				<view class="safety_title_box">
					<text class="safety_title">{{item.valueName}}</text>
					<text class="safety_des"> {{item.sloganName}}</text>
				</view>
			</view>
			<view class="line">

			</view>
			<view class="title_down">
				安全装置
			</view>
			<view class="safety_list centent" v-for="(item,index) in  list6" :key="index">
				<image :src="item.icon" mode="" class="safety_icon"></image>
				<view class="safety_title_box">
					<text class="safety_title">{{item.valueName}}</text>
					<!-- <text class="safety_des"> 房间位于18楼</text> -->
				</view>
			</view>
		</view>
		<view class="evaluate_box" v-if="commentsList.length>0">
			<view class="card_tetle">
				<text class="tip_title">房源评价</text>
				<view class="tip_icon" @click="handleClick(3)">
					<text class="change_color">全部</text>
					<image src="/pagesA/static/details/youjiantou.svg" mode="" class="more_icon"></image>
				</view>
			</view>
			<view class="evaluate_block">
				<view class="left">
					<text>{{detailsData.score}}</text>
					<view class="star">
						<uni-rate :touchable="false" :readonly='true' :size="18" :value="detailsData.score" />
					</view>
				</view>
				<view class="centre_line">

				</view>
				<view class="rigth">
					<view class="rigth_list">
						<text class="progess_title">整洁度：</text>
						<view class="progess">
							<view class="progess_line" :style="{'width':`${detailsData.cleanRate}%`}">

							</view>
						</view>
						<text class="progess_value">{{detailsData.cleanRate}}%</text>
					</view>
					<view class="rigth_list">
						<text class="progess_title">服务：</text>
						<view class="progess">
							<view class="progess_line" :style="{'width':`${detailsData.serviceRate}%`}">

							</view>
						</view>
						<text class="progess_value">{{detailsData.serviceRate}}%</text>
					</view>
				</view>
			</view>
			<view class="evaluate" v-for="(item,index) in commentsList" :key="index">
				<view class="evaluate_top">
					<view class="photo_name_time">
						<image src="/static/nameIcon/default.svg" mode="" class="photo"></image>
						<view class="name_time">
							<view class="name">
								{{item.nickName}}
							</view>
							<text class="time">
								{{item.createTime}}
							</text>
						</view>
					</view>
					<view class="progess_value_box">
						<!-- <view class="progess_box"> -->
						<uni-rate :touchable="false" :readonly='true' :size="14" :value="item.score" />
						<!-- </view> -->
						<view class="progess_value">
							{{item.score}}
						</view>
					</view>
				</view>
				<view class="evaluate_des">
					<view class="des_title">{{item.content}}</view>

					<!-- <view class="des_title">周边情况：楼下就是壹方天地，最近的地铁站是十一号线南山站，小区车位多，停车方便，学校医院也都很近，很适合居住。</view> -->
				</view>
			</view>
		</view>

		<view class="bottom_box">
			<view class="bottom_list">
				<image src="/pagesA/static/details/dianhua.svg" mode="" @click="openPop"></image>
				<text>电话</text>
			</view>
			<view class="bottom_list">
				<image src="/static/soucang.png" mode="" @click="handleColle(detailsData.favorite)"
					v-if="detailsData.favorite == 1"></image>
				<image src="/pagesA/static/details/shouchang.svg" mode="" @click="handleColle(detailsData.favorite)"
					v-else></image>
				<text>{{detailsData.favorite == 1?'取消收藏':'收藏'}}</text>
			</view>
			<view class="bottom_btn" @click="handleClick(4)">
				预约看房
			</view>
		</view>
		<popupBottom v-if="showPopup" @chengeShow='chengeShow' :phone='dialingPhone'></popupBottom>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		getCurrentInstance,
		getCurrentScope
	} from 'vue';
	import {
		onLoad,
		onPageScroll
	} from '@dcloudio/uni-app'
	// import { getCurrentInstance } from 'vue';
	import {
		getDetails,
		allComments,
		favoriteAdd,
		favoriteCancel,
		check,
		getConfig
	} from '@/pagesA/details/js/api.js'
	import http from '@/uitls/http.js'
	import popupBottom from './components/popup.vue'
	import topNavBarVue from './components/topNavBar.vue';
	import swiperVue from './components/swiper.vue';
	import infoCardVue from './components/infoCard.vue';
	import HouseConfigVue from './components/HouseConfig.vue';
	import mapVue from './components/map.vue';
	import houseCardVue from './components/houseCard.vue';
	const app = getApp()

	const mapData = ref({
		id: 900000000, // 使用 marker点击事件 需要填写id
		latitude: '',
		longitude: '',
		covers: [{
			latitude: 39.989410,
			longitude: 116.480881,
			iconPath: '/pagesA/static/details/dizhi.svg'
		}]
	})

	// const showLineIndex = ref(1)
	const showPopup = ref(false)
	const dialingPhone = ref('')
	const getPhoneConfig = async ()=>{
		let res = await getConfig()
		if(res.data.code == 0){
			// console.log('res==',res.data.data.phone)
			dialingPhone.value = res.data.data?.phone
		}
	}
	const openPop = () => {
		
		uni.showModal({
			title: '提示',
			content: `是否拨打客服电话 ${dialingPhone.value}？`,
			success: function(res) {
				if (res.confirm) {
					uni.makePhoneCall({
						phoneNumber: dialingPhone.value
					});
				} else if (res.cancel) {
					console.log('用户取消拨打电话');
				}
			}
		});
		// showPopup.value = true
	}
	const chengeShow = () => {
		showPopup.value = false
	}
	const houseId = ref('')

	//轮播图列表数据
	const swiperList = ref([])

	const roomTagsList = ref([])
	
	const list3 = ref([]);
	const list4 = ref([]);
	const list5 = ref([])
	const list6 = ref([])
	const caseList = ref([])
	//评论列表
	const commentsList = ref([])

	const handleClick = (id) => {
		const urlList = {
			1: '/pagesA/facilities/facilities',
			2: '/pagesA/housing/housing',
			3: '/pagesA/evaluate/evaluate',
			4: '/pagesA/stillMore/stillMore',
			// 4: '/pagesA/login/login'
		}
		// let url = urlList[id] stillMore
		//点击预约看房
		if (id == 4) return appoinHouse()
		uni.navigateTo({
			url: urlList[id] + '?id=' + houseId.value
		})
	}
	const appoinHouse = async () => {
		let res = await check(houseId.value)
		// console.log(res.data,'是否预约看房----',)
		if (res.data.code == -500) {
			http.isMssage(res.data.message)
			return false
		}
		if (res.data.code == "-5014") {
			uni.navigateTo({
				url: '/pagesA/login/login'
			})
			return false
		}
		uni.navigateTo({
			url: '/pagesA/stillMore/stillMore?id=' + houseId.value
		})
	}
	const handleColle = async (favorite) => {
		// console.log('id', favorite)
		// console.log(detailsData.value.favorite);
		let res = ''
		if (favorite == 1) {
			res = await favoriteCancel(houseId.value)
			// console.log('res000----,' res)
		} else {
			res = await favoriteAdd(houseId.value)
			// console.log('res000----,' res)
		}
		console.log('res000----', res.data.code)

		if (res.data.code < 0) {
			http.isMssage(res.data.message)
			if (res.data.code == "-5014") {
				uni.navigateTo({
					url: "/pagesA/login/login"
				})
			}
		} else {
			detailsData.value.favorite = favorite == 1 ? 0 : 1
		}
		// uni.reLaunch({
		// 	url: '/pages/collection/collection'
		// })
	}
	onMounted(() => {
		getPhoneConfig()
	})
	const detailsData = ref({});

	const getData = async () => {
		const res = await getDetails(houseId.value)
		// console.log(res.data.data)
		let {
			name,
			price,
			area,
			roomTypeName,
			floorNum,
			facingName,
			availableStartTime,
			address,
			managementFee,
			electricFee,
			roomTags,
			facilities,
			safeAndManagementVO,
			score,
			cleanRate,
			serviceRate,
			favorite,
			latitude,
			longitude,
			imageUrls
		} = res.data.data
		mapData.latitude = latitude
		mapData.longitude = longitude
		mapData.value = {
			id: 900000000, // 使用 marker点击事件 需要填写id
			latitude: latitude,
			longitude: longitude,
			covers: [{
				latitude: latitude,
				longitude: longitude,
				iconPath: '/pagesA/static/details/adders3.png'
			}]
		}
		detailsData.value = {
			name,
			price,
			area,
			roomTypeName,
			floorNum,
			facingName,
			availableStartTime,
			address,
			managementFee,
			electricFee,
			score,
			cleanRate,
			serviceRate,
			favorite
		}
		roomTagsList.value = roomTags
		list3.value = facilities
		list5.value = safeAndManagementVO?.managements || []
		list6.value = safeAndManagementVO?.safes
		swiperList.value = imageUrls || []
		caseList.value = imageUrls || []
		app.setHousingList(imageUrls || [])
		console.log('detailsData.value ', detailsData.value)
	}

	const getAllComments = async () => {
		let params = {
			pageNum: 1,
			pageSize: 2,
			houseId: houseId.value,
		}
		let res = await allComments(params)
		commentsList.value = res.data.data.list
		// console.log('res====333', res.data.data.list)
	}
	onLoad((options) => {
		console.log(options, '页面携带')
		houseId.value = options.id
		getData()
		getAllComments()
	})
	const isScrolled = ref(false)
	onPageScroll((option) => {
		if (option.scrollTop > 50) {
			isScrolled.value = true;
		} else {
			isScrolled.value = false;
		}
	})
</script>
<style lang="less">
	.pages {
		background: #f6f6f6;
		padding-bottom: 120rpx;

		.datum_box {
			margin-top: 16rpx;
			background: #ffffff;
			padding: 30rpx;

			.title_down {
				margin-top: 30rpx;
				font-family: PingFangSC-Semibold;
				font-size: 28rpx;
				color: #000000;
				line-height: 30rpx;
				font-weight: 600;
			}

			.safety_list {
				display: flex;
				margin-top: 24rpx;

				.safety_icon {
					width: 40rpx;
					height: 40rpx;
					margin-right: 16rpx;
				}

				.safety_title_box {
					display: flex;
					flex-direction: column;

					.safety_title {
						font-family: PingFangSC-Regular;
						font-size: 26rpx;
						color: #000000;
						line-height: 30rpx;
						font-weight: 400;
					}

					.safety_des {
						margin-top: 16rpx;
						font-family: PingFangSC-Regular;
						font-size: 24rpx;
						color: #999999;
						line-height: 30rpx;
						font-weight: 400;
					}
				}
			}

			.centent {
				align-items: center;
			}

			.line {
				margin-top: 30rpx;
				height: 1rpx;
				background: #eeeeee;
				width: 100%;
			}
		}

		.evaluate_box {
			margin-top: 16rpx;
			margin-bottom: 30rpx;
			background: #ffffff;
			padding: 30rpx;

			.evaluate_block {
				margin-top: 30rpx;
				// width: 100%;
				padding: 28rpx 30rpx;
				background: #FFFFFF;
				box-shadow: 0px 0px 6rpx 0px rgba(0, 0, 0, 0.11);
				border-radius: 8rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.left {
					font-family: Arial-BoldMT;
					font-size: 50rpx;
					color: #EE7930;
					text-align: right;
					font-weight: 700;
					width: 49%;
					display: flex;
					align-items: center;

					.star {
						width: 100rpx;
					}
				}

				.centre_line {
					width: 1rpx;
					background: #eeeeee;
					height: 60rpx;
					margin: 0 40rpx;
				}

				.rigth {
					.rigth_list {
						display: flex;
						align-items: center;
						margin-top: 8rpx;

						.progess_title {
							font-family: PingFangSC-Regular;
							font-size: 24rpx;
							color: #333333;
							line-height: 30rpx;
							font-weight: 400;
							width: 96rpx;

						}

						.progess {
							background: #ececec 100%;
							width: 90rpx;
							height: 6rpx;

							.progess_line {
								background: #F8D648;
								width: 90rpx;
								height: 6rpx;
							}

						}

						.progess_value {
							margin-left: 8rpx;
							font-family: PingFangSC-Regular;
							font-size: 24rpx;
							color: #EE7930;
							line-height: 30rpx;
							font-weight: 400;
						}
					}
				}
			}

			.evaluate {

				.evaluate_top {
					margin-top: 30rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.photo_name_time {
						display: flex;
						align-items: center;

						.photo {
							width: 60rpx;
							height: 60rpx;
							border-radius: 6rpx;
							margin-right: 16rpx;
						}

						.name_time {
							display: flex;
							flex-direction: column;

							.name {
								font-family: PingFangSC-Semibold;
								font-size: 26rpx;
								color: #000000;
								letter-spacing: 0;
								// line-height: 30rpx;
								font-weight: 600;
							}

							.time {
								font-family: PingFangSC-Regular;
								font-size: 20rpx;
								color: #666666;
								letter-spacing: 0;
								// line-height: 20rpx;
								font-weight: 400;
							}
						}

					}

					.progess_value_box {
						display: flex;
						align-items: center;

						.progess_box {
							width: 140rpx;
							height: 30rpx;
							border: 1rpx solid red;
							margin-right: 16rpx;
						}

						.progess_value {
							font-family: PingFangSC-Regular;
							font-size: 26rpx;
							color: #EE7930;
							text-align: right;
							line-height: 30rpx;
							font-weight: 400;
						}
					}
				}

				.evaluate_des {
					margin-top: 12rpx;

					.des_title {
						margin-top: 8rpx;
						font-family: PingFangSC-Regular;
						font-size: 24rpx;
						color: #666666;
						letter-spacing: 0;
						// line-height: 42rpx;
						font-weight: 400;
					}
				}
			}
		}

		.bottom_box {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 120rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			background: #ffffff;
			z-index: 10000;

			.bottom_list {
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					width: 60rpx;
					height: 60rpx;
					margin-bottom: 16rpx;
				}

				text {
					font-family: PingFangSC-Regular;
					font-size: 20rpx;
					color: #666666;
					text-align: center;
					font-weight: 400;
					width: 80rpx;
					text-align: center;
				}
			}

			.bottom_btn {
				width: 400rpx;
				height: 84rpx;
				background-image: linear-gradient(270deg, #F1B13F 0%, #F8D648 100%);
				border-radius: 42rpx;
				font-size: 30rpx;
				color: #ffffff;
				text-align: center;
				line-height: 84rpx;
			}
		}

		.card_tetle {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.tip_title {
				font-family: PingFangSC-Semibold;
				font-size: 32rpx;
				color: #000000;
				line-height: 36rpx;
				font-weight: 600;
			}

			.tip_icon {
				font-family: PingFangSC-Regular;
				font-size: 24rpx;
				color: #999999;
				text-align: right;
				line-height: 30rpx;
				font-weight: 400;
				display: flex;
				align-items: center;

				.more_icon {
					margin-left: 8rpx;
					width: 24rpx;
					height: 24rpx;
				}
			}
		}
	}
</style>